<template>
	<div class="home-preview">




		<!-- 新闻资讯 -->
		<div id="animate_newsnews" class="news animate__animated">
			<div class="news_title_box">
				<span class="news_title">公告资讯</span>
				<span class="news_subhead">{{'news'.toUpperCase()}}</span>
			</div>
			<div class="list list25 index-pv1">
				<div class="leftView">
					<div class="titleView">
						<div class="title">公告资讯</div>
						<div class="text">News Information</div>
					</div>
					<div class="list-body">
						<div v-for="(item,index) in newsList" v-if="index<4" :key="index" class="list-item" @click="toDetail('newsDetail', item)">
							<div class="img">
								<img :src="baseUrl + item.picture" alt="">
							</div>
							<div class="infoBox">
								<div class="name">{{item.title}}</div>
								<div class="time">{{item.addtime.split(' ')[0]}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="rightView">
					<div class="list-item" v-for="(item,index) in newsList" v-if="index>=4&&index<8" :key="index" @click="toDetail('newsDetail', item)">
						<div class="top-info">
							<div class="name">{{item.title}}</div>
							<span class="icon iconfont icon-jiantou25"></span>
						</div>
						<div class="infoBox">
							<img :src="baseUrl + item.picture" alt="">
							<div class="desc">{{item.introduction}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moreBtn" @click="moreBtn('news')">
				<span class="text">查看更多</span>
				<i class="icon iconfont icon-gengduo1"></i>
			</div>
		</div>
		<!-- 新闻资讯 -->
		<!-- 特价商品 -->
		<div id="animate_listshangpinxinxi" class="lists animate__animated">
			<div class="list_title_box">
				<span class="list_title">商品信息展示</span>
				<span class="list_subhead">{{'shangpinxinxi'.toUpperCase()}} SHOW</span>
			</div>
			<div class="list list23 index-pv1">
				<div class="tab_view">
					<div class="tab" :class="listIndex23shangpinxinxi == 0 ? 'tabActive' : ''" @click="listIndexClick23(0, 'shangpinxinxi')">
						<span class="text">全部</span>
					</div>
					
					<template v-for="(item,index) in listList23shangpinxinxi">
						<div v-if="index < 6" class="tab" :class="listIndex23shangpinxinxi == index + 1 ? 'tabActive' : ''" @click="listIndexClick23(index + 1, 'shangpinxinxi')">
							<img v-if="item.image" :src="baseUrl + (item.image?item.image.split(',')[0]:'')">
							<span class="text">{{item[listColumn23shangpinxinxi]}}</span>
						</div>
					</template>
				</div>
				<div class="list-body">
					<div class="list-body-top" v-if="shangpinxinxiList.length>0">
						<div class="img">
							<img v-if="preHttp(shangpinxinxiList[0].tupian)" :src="shangpinxinxiList[0].tupian.split(',')[0]" alt="" />
							<img v-else :src="baseUrl + (shangpinxinxiList[0].tupian?shangpinxinxiList[0].tupian.split(',')[0]:'')" alt="" />
						</div>
						<div class="infoBox">
							<div class="name">{{shangpinxinxiList[0].shangpinmingcheng}}</div>
							<div class="desc ql-snow ql-editor" v-html="shangpinxinxiList[0].shangpinxiangqing"></div>

							<div class="centerInfo">
								<div class="time_item">
									<span class="icon iconfont icon-shijian21"></span>
									<span class="label">发布时间：</span>
									<span class="text">{{shangpinxinxiList[0].addtime.split(' ')[0]}}</span>
								</div>
								<div class="like_item">
									<span class="icon iconfont icon-zan10"></span>
									<span class="label">点赞：</span>
									<span class="text">{{shangpinxinxiList[0].thumbsupnum}}</span>
								</div>
								<div class="collect_item">
									<span class="icon iconfont icon-shoucang10"></span>
									<span class="label">收藏：</span>
									<span class="text">{{shangpinxinxiList[0].storeupnum}}</span>
								</div>
							</div>
							<div class="bottomInfo">
								<div class="more_btn" @click="toDetail('shangpinxinxiDetail', shangpinxinxiList[0])">
									<span class="text">查看更多</span>
									<span class="icon iconfont icon-gengduo1"></span>
								</div>
								<div class="price">￥<div class="price_text">{{shangpinxinxiList[0].price}}</div></div>
							</div>
						</div>
					</div>
					<div class="list-body-bottom" v-if="shangpinxinxiList.length>1">
						<div v-if="index>0&&index< Number(7)" class="list-item" v-for="(item,index) in shangpinxinxiList" :key="index" @click="toDetail('shangpinxinxiDetail', item)">
							<div class="img">
								<img v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
								<img v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
							</div>
							<div class="infoBox">
								<div class="name">{{item.shangpinmingcheng}}</div>
								<div class="price">￥<div class="price_text">{{item.price}}</div></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moreBtn" @click="moreBtn('shangpinxinxi')">
				<span class="text">查看更多</span>
				<i class="icon iconfont icon-gengduo1"></i>
			</div>
	

		</div>
		<!-- 特价商品 -->
	</div>
</template>

<script>
import 'animate.css'
import Swiper from "swiper";

	export default {
		//数据集合
		data() {
			return {
				baseUrl: '',
				newsList: [],

				shangpinxinxiList: [],



				listIndex23shangpinxinxi: 0,
				listList23shangpinxinxi: [],
				listColumn23shangpinxinxi: '',

			}
		},
		created() {
			this.baseUrl = this.$config.baseUrl;
			this.getNewsList();
			this.getList();
			this.shangpinxinxiListCate()
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			setTimeout(()=>{
				this.handleScroll()
			},100)
			
			this.swiperChanges()
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.handleScroll)
		},
		//方法集合
		methods: {
			swiperChanges() {
				setTimeout(()=>{
				},750)
			},

			shangpinxinxiListCate(){
				this.$http.get('shangpinfenlei/list',{}).then(res => {
					if (res.data.code == 0) {
						this.listList23shangpinxinxi = res.data.data.list
					}
				});
				this.listColumn23shangpinxinxi = 'shangpinfenlei'
			},
			listIndexClick23(index, name) {
				this['listIndex23' + name] = index
				this.getList()
			},

			handleScroll() {
				let arr = [
					{id:'about',css:'animate__'},
					{id:'system',css:'animate__'},
					{id:'animate_listshangpinxinxi',css:'animate__'},
					{id:'animate_newsnews',css:'animate__'},
				]
			
				for (let i in arr) {
					let doc = document.getElementById(arr[i].id)
					if (doc) {
						let top = doc.offsetTop
						let win_top = window.innerHeight + window.pageYOffset
						// console.log(top,win_top)
						if (win_top > top && doc.classList.value.indexOf(arr[i].css) < 0) {
							// console.log(doc)
							doc.classList.add(arr[i].css)
						}
					}
				}
			},
			preHttp(str) {
				return str && str.substr(0,4)=='http';
			},
			getNewsList() {
				let data = {
					page: 1,
					limit: 7,
					sort: 'addtime',
					order: 'desc'
				}
				this.$http.get('news/list', {params: data}).then(res => {
					if (res.data.code == 0) {
						this.newsList = res.data.data.list;
					
					}
				});
			},
			getList() {
				let autoSortUrl = "";
				let data = {}
			
				data = {
					page: 1,
					limit: 7,
				}

				if(this.listIndex23shangpinxinxi != 0){
					data.shangpinfenlei = this.listList23shangpinxinxi[this.listIndex23shangpinxinxi - 1].shangpinfenlei
				}
				this.$http.get('shangpinxinxi/list', {params: data}).then(res => {
					if (res.data.code == 0) {
						this.shangpinxinxiList = res.data.data.list;
					}
				});
			},
			toDetail(path, item) {
				this.$router.push({path: '/index/' + path, query: {id: item.id}});
			},
			moreBtn(path) {
				this.$router.push({path: '/index/' + path});
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.home-preview {
		margin: 0px auto;
		flex-direction: column;
		background: #fff;
		display: flex;
		width: 100%;
		.news {
			padding: 30px 0;
			margin: 20px 0 0;
			background: url(http://codegen.caihongy.cn/20240918/0158f8ec08364ef389a696ea5ad88d08.png) fixed,#018cc030;
			width: 100%;
			position: relative;
			order: 4;
			.news_title_box {
				padding: 0 50px;
				margin: 50px auto 0;
				background: #03cce9;
				width: 1200px;
				position: relative;
				text-align: left;
				height: 40px;
				.news_title {
					padding: 0 60px;
					margin: -24px 0 0;
					color: #fff;
					background: url(http://codegen.caihongy.cn/20240918/f134e912df3547dd88a98afc1da8b24b.png) no-repeat center top / 100% 100% ;
					display: inline-block;
					width: auto;
					font-size: 22px;
					line-height: 68px;
					height: 64px;
				}
				.news_subhead {
					margin: 0 0 10px;
					color: #999;
					display: none;
					width: 100%;
					font-size: 20px;
					line-height: 1.5;
					text-align: center;
				}
			}
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
			.list25 {
				margin: 40px auto;
				display: flex;
				width: 1200px;
				justify-content: space-between;
				align-items: flex-start;
				height: auto;
				.leftView {
					padding: 0px 0 30px;
					background: url(http://codegen.caihongy.cn/20240718/ce12b2c33f0946b2b108e5b99538e42a.jpg) no-repeat center top / 100% 100%;
					width: 370px;
					.titleView {
						padding: 30px 0 10px;
						text-align: center;
						.title {
							color: #333;
							font-weight: 600;
							font-size: 26px;
						}
						.text {
							color: #999;
							font-size: 22px;
						}
					}
					.list-body {
						margin: 0 30px;
						.list-item {
							border: 1px dotted #bababa;
							cursor: pointer;
							padding: 0 0 10px;
							margin: 0 0 20px;
							overflow: hidden;
							display: flex;
							border-width: 0 0 1px;
							height: auto;
							.img {
								margin: 0 16px 0 0;
								overflow: hidden;
								width: 92px;
								height: 75px;
								img {
									object-fit: cover;
									display: block;
									width: 100%;
									transition: all 0.3s ease;
									height: 100%;
								}
							}
							.infoBox {
								display: block;
								.name {
									margin: 0 0 5px;
									overflow: hidden;
									color: #666;
									font-weight: normal;
									display: flex;
									width: 100%;
									font-size: 15px;
									line-height: 24px;
									align-items: center;
									transition: all 0.3s ease;
									height: 48px;
								}
								.time {
									overflow: hidden;
									color: #aaa;
									font-size: 15px;
									transition: all 0.3s ease;
									height: 30px;
								}
							}
						}
						.list-item:hover {
							.img {
								img {
									transform: scale(1.2);
								}
							}
							.infoBox {
								.name {
									color: #000;
								}
								.time {
									color: #c00;
									font-size: 14px;
								}
							}
						}
					}
				}
				.rightView {
					display: flex;
					width: calc(100% - 400px);
					justify-content: space-between;
					flex-wrap: wrap;
					.list-item {
						cursor: pointer;
						width: 48%;
						height: 296px;
						.top-info {
							display: flex;
							width: 100%;
							font-size: 16px;
							line-height: 50px;
							justify-content: space-between;
							align-items: center;
							height: 50px;
							.name {
								color: #333;
								font-size: 16px;
								line-height: 50px;
								height: 50px;
							}
							.icon {
								margin: 0;
								font-size: 16px;
							}
						}
						.infoBox {
							overflow: hidden;
							width: 100%;
							position: relative;
							height: calc(100% - 50px);
							img {
								object-fit: cover;
								display: block;
								width: 100%;
								transition: all 0.3s ease;
								height: 100%;
							}
							.desc {
								padding: 6px 0 0;
								margin: 0 5%;
								color: #666;
								bottom: -30px;
								display: block;
								font-size: 15px;
								line-height: 30px;
								transition: all 0.3s ease;
								overflow: hidden;
								background: rgba(255,255,255,0.7);
								width: 90%;
								position: absolute;
								text-align: center;
								height: 66px;
							}
						}
					}
					.list-item:hover {
						.infoBox {
							img {
								transform: scale(1.2);
							}
							.desc {
								color: #000;
								bottom: 0;
							}
						}
					}
				}
			}
			.moreBtn {
				border: 0;
				cursor: pointer;
				margin: 60px auto;
				top: 0;
				background: #f7db61;
				display: block;
				width: 110px;
				line-height: 32px;
				position: absolute;
				right: calc((100% - 1200px)/2);
				text-align: center;
				.text {
					color: #000;
					font-size: 15px;
				}
				.icon {
					color: #000;
					font-size: 15px;
				}
			}
		}
		.lists {
			padding: 10px 0 20px;
			margin: 0;
			background: #fff;
			width: 100%;
			position: relative;
			order: 2;
			.list_title_box {
				padding: 0 50px;
				margin: 50px auto 0;
				background: #03cce9;
				width: 1200px;
				position: relative;
				text-align: left;
				height: 40px;
				.list_title {
					padding: 0 60px;
					margin: -24px 0 0;
					color: #fff;
					background: url(http://codegen.caihongy.cn/20240918/f134e912df3547dd88a98afc1da8b24b.png) no-repeat center top / 100% 100% ;
					display: inline-block;
					width: auto;
					font-size: 22px;
					line-height: 68px;
					height: 64px;
				}
				.list_subhead {
					margin: 0 0 10px;
					color: #999;
					display: none;
					width: 100%;
					font-size: 20px;
					line-height: 1.5;
					text-align: center;
				}
			}
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, -10px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
			.list23 {
				padding: 0;
				margin: 0 auto;
				overflow: hidden;
				background: none;
				width: 1220px;
				.tab_view {
					margin: 30px 0 0;
					display: flex;
					width: calc(100% - 20px);
					justify-content: center;
					align-items: center;
					.tab {
						border: 1px solid #03abe930;
						border-radius: 5px;
						padding: 2px 10px;
						margin: 0 10px;
						background: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						transition: 0.3s;
						min-width: 96px;
						img {
							border-radius: 50%;
							margin: 0 10px 0 0;
							width: 40px;
							transition: 0.3s;
							height: 40px;
						}
						.text {
							color: #000;
							display: block;
							font-size: 16px;
							line-height: 50px;
							transition: 0.3s;
							text-align: center;
							height: 50px;
						}
					}
					.tab:hover {
						border: 1px solid #03abe9;
						cursor: pointer;
						background: #03abe9;
						transition: all 0s;
						img {
							border-radius: 50%;
						}
						.text {
							color: #fff;
						}
					}
					.tab.tabActive {
						border: 1px solid #03abe9;
						color: #000;
						background: #03abe9;
						min-width: 96px;
						img {
							border-radius: 50%;
						}
						.text {
							color: #fff;
						}
					}
				}
				.list-body {
					margin: 40px 0 0;
					.list-body-top {
						margin: 0 auto;
						display: flex;
						width: calc(100% - 20px);
						justify-content: space-between;
						align-items: center;
						.img {
							overflow: hidden;
							width: 600px;
							height: 450px;
							img {
								object-fit: cover;
								width: 100%;
								transition: all 0.3s;
								height: 100%;
							}
						}
						.infoBox {
							background-color: #fff;
							padding: 40px 30px;
							flex: 1;
							box-sizing: border-box;
							height: 450px;
							.name {
								overflow: hidden;
								white-space: nowrap;
								width: 100%;
								font-size: 20px;
								line-height: 30px;
								text-overflow: ellipsis;
							}
							.desc {
								margin: 20px 0;
								color: #666;
								width: 100%;
								font-size: 15px;
								line-height: 1.8;
								text-align: justify;
							}
							.centerInfo {
								color: #888;
								display: flex;
								width: 100%;
								font-size: 15px;
								flex-wrap: wrap;
								.time_item {
									padding: 0 10px 0 0;
									.icon {
										margin: 0 2px 0 0;
										line-height: 1.5;
									}
									.label {
										line-height: 1.5;
									}
									.text {
										line-height: 1.5;
									}
								}
								.publisher_item {
									padding: 0 10px 0 0;
									.icon {
										margin: 0 2px 0 0;
										line-height: 1.5;
									}
									.label {
										line-height: 1.5;
									}
									.text {
										line-height: 1.5;
									}
								}
								.like_item {
									padding: 0 10px 0 0;
									.icon {
										margin: 0 2px 0 0;
										line-height: 1.5;
									}
									.label {
										line-height: 1.5;
									}
									.text {
										line-height: 1.5;
									}
								}
								.collect_item {
									padding: 0 10px 0 0;
									.icon {
										margin: 0 2px 0 0;
										line-height: 1.5;
									}
									.label {
										line-height: 1.5;
									}
									.text {
										line-height: 1.5;
									}
								}
								.view_item {
									padding: 0;
									.icon {
										margin: 0 2px 0 0;
										line-height: 1.5;
									}
									.label {
										line-height: 1.5;
									}
									.text {
										line-height: 1.5;
									}
								}
							}
							.bottomInfo {
								margin: 20px 0 0;
								display: flex;
								justify-content: space-between;
								align-items: center;
								.more_btn {
									border: 1px solid #ccc;
									color: #333;
									display: flex;
									font-size: 16px;
									line-height: 48px;
									transition: 0.2s;
									border-radius: 24px;
									background: #fff;
									width: 150px;
									justify-content: center;
									align-items: center;
									text-align: center;
									height: 48px;
									.text {
										padding: 0 5px 0 0;
										color: #666;
										font-size: 16px;
									}
									.icon {
										color: #666;
										font-size: 12px;
									}
								}
								.more_btn:hover {
									background: #03abe9;
									border-color: #03abe9;
									transition: all 0s;
									.text {
										color: #fff;
									}
									.icon {
										color: #fff;
									}
								}
								.price {
									margin: 10px 0 0;
									color: #6f6f6f;
									font-size: 16px;
									.price_text {
										color: #f00;
										font-weight: bold;
										display: inline-block;
										font-size: 32px;
									}
								}
							}
						}
					}
					.list-body-bottom {
						margin: 29px 0 0;
						display: flex;
						flex-wrap: wrap;
						.list-item {
							margin: 0 10px 20px;
							width: calc(33.33% - 20px);
							.img {
								overflow: hidden;
								width: 100%;
								height: 200px;
								img {
									object-fit: cover;
									width: 100%;
									transition: 0.3s;
									height: 100%;
								}
							}
							.infoBox {
								padding: 0 19px 5px;
								background: #fff;
								display: block;
								width: 100%;
								justify-content: space-between;
								align-items: center;
								position: relative;
								box-sizing: border-box;
								transition: 0.3s;
								height: auto;
								.name {
									overflow: hidden;
									max-width: calc(100% - 110px);
									white-space: nowrap;
									background: none;
									width: auto;
									font-size: 15px;
									line-height: 34px;
									text-overflow: ellipsis;
									transition: 0.3s;
									height: 30px;
								}
								.price {
									color: #6f6f6f;
									white-space: nowrap;
									bottom: 0px;
									background: none;
									width: auto;
									font-size: 16px;
									position: absolute;
									right: 10px;
									transition: 0.3s;
									text-align: right;
									.price_text {
										color: #f00;
										font-weight: bold;
										display: inline-block;
										font-size: 24px;
										transition: 0.3s;
									}
								}
							}
						}
						.list-item:hover {
							cursor: pointer;
							.img {
								img {
									transform: scale(1.1);
								}
							}
							.infoBox {
								background: #03abe9;
								transition: all 0s;
								.name {
									color: #fff;
								}
								.price {
									color: #fff;
									.price_text {
										color: #fff;
									}
								}
							}
						}
					}
				}
			}
			.moreBtn {
				border: 0;
				cursor: pointer;
				margin: 40px auto;
				top: 0;
				background: #f7db61;
				display: block;
				width: 110px;
				line-height: 32px;
				position: absolute;
				right: calc((100% - 1200px)/2);
				text-align: center;
				.text {
					color: #333;
					font-size: 15px;
				}
				.icon {
					color: #333;
					font-size: 15px;
				}
			}
		}
	}
</style>
